/*
* 一般的ui组件
* 显示指定用户列表的ui组件
* */
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {WingBlank, WhiteSpace, Card} from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import QueueAnim from 'rc-queue-anim'

const Header = Card.Header
const Body = Card.Body

class UserList extends Component{

    static propTypes = {
        userList: PropTypes.array.isRequired
    }

    render() {
        const {userList} = this.props
        // userList.map(user => {user.header ? user.header : '头像1'})
        return (
            <WingBlank style={{marginBottom:50}}>
                <QueueAnim type='scale'>
                  {
                    userList.map(user => (
                      <div key={user._id}>
                        <WhiteSpace/>
                        <Card onClick={() => this.props.history.push(`/chat/${user._id}`)}>
                          <Header

                            thumb={ user.header ? require(`../../assets/images/${user.header}.png`) : null}
                            extra={user.username}
                          />
                          <Body>
                              <div>班级: {user.belongClass}</div>
                              {user.school ? <div>毕业院校: {user.school}</div> : null}
                              {user.degree ? <div>学历: {user.degree}</div> : null}
                              <div>描述: {user.info}</div>
                          </Body>
                        </Card>
                      </div>
                    ))
                  }
              </QueueAnim>
          </WingBlank>
        )
    }
}

export default withRouter(UserList)

